<template>
  <div>
    <el-button-group>
      <el-button
        type="plain"
        size="small"
        @click="zoomIn"
        class="lf-control-item"
      >
        <i class="lf-control-zoomIn"></i>
        <div class="lf-control-text">放大</div>
      </el-button>
      <el-button
        type="plain"
        size="small"
        @click="zoomOut"
        class="lf-control-item"
      >
        <i class="lf-control-zoomOut"></i>
        <div class="lf-control-text">缩小</div>
      </el-button>
      <el-button
        type="plain"
        size="small"
        @click="zoomReset"
        class="lf-control-item"
      >
        <i class="lf-control-fit"></i>
        <div class="lf-control-text">大小适应</div></el-button
      >

      <el-button
        type="plain"
        size="small"
        @click="undo"
        :disabled="undoDisable"
        class="lf-control-item"
        ><i class="lf-control-undo"></i>
        <div class="lf-control-text">上一步(ctrl+z)</div></el-button
      >
      <el-button
        type="plain"
        size="small"
        @click="redo"
        :disabled="redoDisable"
        class="lf-control-item"
      >
        <i class="lf-control-redo"></i>
        <div class="lf-control-text">下一步(ctrl+y)</div></el-button
      >
      <el-button
        type="plain"
        size="small"
        @click="translateRest"
        class="lf-control-item"
      >
        <i class="lf-control-restore"></i>
        <div class="lf-control-text">定位还原</div></el-button
      >
      <!-- <el-button
        type="plain"
        size="small"
        @click="reset"
        class="lf-control-item"
      >
        <i class="lf-control-restore"></i>
        <div class="lf-control-text">还原(大小&定位)</div></el-button
      > -->
      <el-button
        :type="selectionMode ? 'primary' : 'plain'"
        size="small"
        @click="selection"
        class="lf-control-item"
        ><i class="lf-control-selection"></i>
        <div class="lf-control-text">
          {{ !selectionMode ? "框选" : "取消框选" }}
        </div></el-button
      >

      <el-button
        type="plain"
        size="small"
        @click="download"
        class="lf-control-item"
      >
        <i class="lf-control-image"></i>
        <div class="lf-control-text">下载图片</div></el-button
      >
      <el-button
        type="plain"
        size="small"
        @click="catData"
        class="lf-control-item"
        ><i class="lf-control-download"></i>
        <div class="lf-control-text">查看数据</div></el-button
      >
      <el-button
        type="plain"
        size="small"
        @click="loadDemo"
        class="lf-control-item"
      >
        <i class="lf-control-upload"></i>
        <div class="lf-control-text">加载示例</div></el-button
      >
    </el-button-group>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import LogicFlow from "@logicflow/core";
import { SelectionSelect } from "@logicflow/extension";
import demoData from "../example.json";

@Component
export default class ToolbarComponent extends Vue {
  @Prop() private lf!: LogicFlow;
  undoDisable = true;
  redoDisable = true;
  graphData = null;
  dataVisible = false;
  selectionMode = false;

  mounted(): void {
    this.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
      this.undoDisable = !undoAble;
      this.redoDisable = !redoAble;
    });
  }

  zoomIn(): void {
    this.lf.zoom(true);
  }

  zoomOut(): void {
    this.lf.zoom(false);
  }

  zoomReset(): void {
    this.lf.resetZoom();
  }

  translateRest(): void {
    this.lf.resetTranslate();
  }

  reset(): void {
    this.lf.resetZoom();
    this.lf.resetTranslate();
  }

  undo(): void {
    this.lf.undo();
  }

  redo(): void {
    this.lf.redo();
  }

  download(): void {
    this.lf.getSnapshot();
  }

  catData(): void {
    this.$emit("catData");
  }

  selection(): void {
    this.selectionMode = !this.selectionMode;
    this.lf.updateEditConfig({
      stopMoveGraph: this.selectionMode,
    });

    if (!this.selectionMode) {
      SelectionSelect.close();
    } else {
      SelectionSelect.open();
    }
  }

  loadDemo(): void {
    this.lf.render(demoData);
  }
}
</script>

<style scoped lang="scss">
@import "../common/style.scss";

.lf-control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  padding: 5px 10px;
}

.lf-control-item.is-disabled {
  filter: opacity(0.6);
  cursor: not-allowed;
}

.lf-control-text {
  padding-top: 5px;
  font-size: 12px;
  min-width: 50px;
}

.lf-control-item i {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-size: cover;
}

.lf-control-zoomOut {
  background-image: url();
}
.lf-control-zoomIn {
  background-image: url();
}
.lf-control-fit {
  background-image: url();
}
.lf-control-undo {
  background-image: url();
}
.lf-control-redo {
  background-image: url();
}

.lf-control-selection {
  background-image: url();
}

.lf-control-download {
  background-image: url();
}

.lf-control-image {
  background-image: url();
}

.lf-control-upload {
  background-image: url();
}

.lf-control-restore {
  background-image: url();
}
</style>
